﻿<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:soap="http://www.w3.org/2003/05/soap-envelope"
    xmlns:dssp="http://schemas.microsoft.com/xw/2004/10/dssp.html"
    xmlns:svc="http://www.promrds.com/contracts/2008/01/teleoperation.html"
  >
  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:comment><!-- Service Header Info --></xsl:comment>
    <xsl:variable name="title">
      TeleOperation Service
    </xsl:variable>
    <xsl:variable name="serviceName">
      <img src="/resources/teleoperation.y2008.m01/ProMRDS.Robotics.TeleOperation.Resources.icon_32x32.gif" align="middle" /> TeleOperation
    </xsl:variable>
    <xsl:variable name="description">
      Allows you to drive a Differential Drive robot using live video from a WebCam on the robot
    </xsl:variable>
    
    <xsl:call-template name="MasterPage">
      <xsl:with-param name="serviceName" select="$serviceName" />
      <xsl:with-param name="description" select="$description" />
      <!-- If title is not provided, serviceName will be used instead. -->
      <xsl:with-param name="title">
        <xsl:value-of select="$serviceName" />
        <xsl:if test="$title != ''">
          <xsl:text> - </xsl:text>
          <xsl:value-of select="$title" />
        </xsl:if>        
      </xsl:with-param>
      <!-- Possible values for navigation are: 'Open', 'Closed', and 'None'
           'Open' is the default value. -->
      <xsl:with-param name="navigation" select="'Open'" />

      <!-- The contents of head param will be placed just before the </head> tag in html. -->
      <xsl:with-param name="head">
        <link rel="stylesheet" href="/resources/teleoperation.y2008.m01/ProMRDS.Robotics.TeleOperation.Resources.TeleOperation.css" type="text/css" />
        <style type="text/css">
          /* Service-specific stylesheet goes here */
        </style>
        <script language="javascript" type="text/javascript">
          <![CDATA[<!--

/* Service-specific script goes here */

dssRuntime.init = function()
{
  // Add page initialization code here.
  // This function is attached to the window.onload event.
  // Do not override window.onload.
}

// Check that a value is numeric and within a specified range
// Returns a string which is either empty or an error message
function validate(val, fieldname, minval, maxval)
{
  var msg = "";
  var num;
  if (val.length == 0)
  {
     msg += "Please enter a value for " + fieldname + "\n";
  }
  else
  {
    num = parseFloat(val);
    if (isNaN(num))
      msg += fieldname + " must be a number\n";
    else if (num < minval || num > maxval)
      msg += fieldname + " is out of range (" + minval + " to " + maxval +")\n";
  }
  return msg;
}

// Check the form before submission
// NOTE: Return true if OK to proceed, or false if there are errors
function checkform(f)
{
  var msg = "";

  // Accumulate all of the error messages (if there are any)
  msg += validate(f.DeadZoneX.value, "Dead Zone X", 0, 900);
  msg += validate(f.DeadZoneY.value, "Dead Zone Y", 0, 900);
  msg += validate(f.TranslateScaleFactor.value, "Translate Scale Factor", 0.01, 100);
  msg += validate(f.RotateScaleFactor.value, "Rotate Scale Factor", 0.01, 100);
  msg += validate(f.MotionSpeed.value, "Motion Speed", 10, 1000);
  msg += validate(f.DriveDistance.value, "Drive Distance", 10, 2000);
  msg += validate(f.RotateAngle.value, "Rotate Angle", 5, 360);

  // If there were any errors at all, display them
  if (msg != "")
  {
    // Pop up a dialog to tell the user what is wrong
    alert(msg);
    return false;
  }

  // If we got here, then the data is OK
  return true;
}

//-->     ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <xsl:template match="/svc:TeleOperationState">
    <form name="DssForm" method="post" onsubmit="return checkform(this);">
      <div class="Content">
    <table width="100%" border="0" cellpadding="5" cellspacing="5">
      <tr>
        <th>Host:</th>
        <td>
          <xsl:value-of select="svc:Host"/>
        </td>
      </tr>
      <tr>
        <th>Port:</th>
        <td>
          <xsl:value-of select="svc:Port"/>
        </td>
      </tr>
      <tr>
        <th>Connected:</th>
        <td>
          <xsl:choose>
            <xsl:when test="svc:Connected = 'true'">
              Connection established
            </xsl:when>
            <xsl:otherwise>
              Not connected
              (<b>Tip:</b>
              <span class="greyText">
                Enter a Host name and a Port and click on Connect
              </span>)
            </xsl:otherwise>
          </xsl:choose>
        </td>
      </tr>
      <tr>
        <th>Drive Service:</th>
        <td><xsl:value-of select="svc:DriveService"/></td>
      </tr>
      <tr>
        <th>WebCam Service:</th>
        <td><xsl:value-of select="svc:WebCamService"/></td>
      </tr>
      <tr>
        <th colspan="2">Option Settings</th>
      </tr>
      <tr>
        <th>Main Window Start Position</th>
        <td>
          <xsl:value-of select="svc:Options/svc:WindowStartX"/>, <xsl:value-of select="svc:Options/svc:WindowStartY"/> (Saved automatically)
        </td>
      </tr>
      <tr>
        <th>WebCam Window Start Position</th>
        <td>
          <xsl:value-of select="svc:Options/svc:WebCamStartX"/>, <xsl:value-of select="svc:Options/svc:WebCamStartY"/> (Saved automatically)
        </td>
      </tr>
      <tr>
        <th>Dead Zone X</th>
        <td>
          <input type="text" name="DeadZoneX" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:DeadZoneX"/>
            </xsl:attribute>
          </input>
          (Game Controller range is 1000, so typical value is 100)
        </td>
      </tr>
      <tr>
        <th>Dead Zone Y</th>
        <td>
          <input type="text" name="DeadZoneY" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:DeadZoneY"/>
            </xsl:attribute>
          </input>
        </td>
      </tr>
      <tr>
        <th>Translate Scale Factor</th>
        <td>
          <input type="text" name="TranslateScaleFactor" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:TranslateScaleFactor"/>
            </xsl:attribute>
          </input>
          (Usually 1.0)
        </td>
      </tr>
      <tr>
        <th>Rotate Scale Factor</th>
        <td>
          <input type="text" name="RotateScaleFactor" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:RotateScaleFactor"/>
            </xsl:attribute>
          </input>
          (Usually 0.25 to 0.75 so rotation is slower than translation)
        </td>
      </tr>
      <tr>
        <th>Motion Speed</th>
        <td>
          <input type="text" name="MotionSpeed" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:MotionSpeed"/>
            </xsl:attribute>
          </input>
          (Range is 10-1000 to match game controller)
          <xsl:if test="svc:Options/svc:MotionSpeed &lt; 100">
            (<b>Tip:</b> The robot might not move very fast. Increase the speed.)
          </xsl:if>
        </td>
      </tr>
      <tr>
        <th>Drive Distance (mm)</th>
        <td>
          <input type="text" name="DriveDistance" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:DriveDistance"/>
            </xsl:attribute>
          </input>
          (300mm = 1 foot)
        </td>
      </tr>
      <tr>
        <th>Rotate Angle (degrees)</th>
        <td>
          <input type="text" name="RotateAngle" class="TextBox">
            <xsl:attribute name="value">
              <xsl:value-of select="svc:Options/svc:RotateAngle"/>
            </xsl:attribute>
          </input>
          (Typically 45 or 90)
        </td>
      </tr>
      <tr>
        <td>
          <input type="submit" name="Save" value="Save" />
        </td>
      </tr>
    </table>
    </div>
    </form>
  </xsl:template>

</xsl:stylesheet>
